<template>
    <div class="account-wrap pos-rel">
        <div class="common-title">我的账户
            <span class="float-right btn exchange-btn" @click="showDialog = true">资金划转</span>
        </div>
        <div class="info-box flex-hor-layout">
            <div class="item">
                <div class="val">{{account.accountBalance | fck(-8, 2)}}<span class="unit">(USDT)</span></div>
                <div class="title">账户余额</div>
            </div>
            <div class="item">
                <div class="val">{{user.unrealizedPnl | fck(-8, 2)}}<span class="unit">(USDT)</span></div>
                <div class="title">未实现盈亏</div>
            </div>
        </div>
        <div class="info2 pos-abs">
            <div class="info-box flex-hor-layout">
                <div class="item">
                    <div class="val">{{marginRemainder | fck(-8, 2)}}
                        <span class="unit">(USDT)</span></div>
                    <div class="title">保证金余额</div>
                </div>
                <div class="item">
                    <div class="val">{{user.positionMargin | fck(-8, 2)}}<span class="unit">(USDT)</span></div>
                    <div class="title">持仓保证金</div>
                </div>
                <div class="item">
                    <div class="val">{{maintainMargin | fck(-8, 2)}}<span class="unit">(USDT)</span></div>
                    <div class="title">维持保证金</div>
                </div>
            </div>
        </div>


        <el-dialog
            title="资金划转"
            :visible.sync="showDialog"
            :lock-scroll="false"
            class="black-dialog medium-dialog deposit-withdraw-dialog"
            width="30%">
            <div class="dialog-form">
                <div class="row flex-hor-layout">
                    <div class="item">
                        <div class="title">从</div>
                        <div class="border-box">{{deposit ? '我的钱包' : '合约账户'}}</div>
                    </div>
                    <div class="mid pos-rel">
                        <i class="icon toggle-icon pos-abs pointer" @click="deposit = !deposit"></i>
                    </div>
                    <div class="item">
                        <div class="title">到</div>
                        <div class="border-box">{{!deposit ? '我的钱包' : '合约账户'}}</div>
                    </div>
                </div>
                <div class="row input-row">
                    <div class="border-box flex-hor-layout">
                        <div class="">数量</div>
                        <input type="number" class="input borderless" v-model="amount" placeholder="请输入划转数量">
                        <div class="">USDT</div>
                    </div>
                </div>
                <div class="row account-row">
                    最多可划转：{{account.accountBalance | fck(-8, 2)}}
                    <span class="float-right pointer" @click="transferAll">全部划转</span>
                </div>
                <div class="btn ok-btn pointer" @click="handleExchange">确 定</div>
            </div>
        </el-dialog>
    </div>
</template>
<script>
    import { mapGetters } from 'vuex'
    import ToastUtils from '@/utils/toastUtils'
    import {transferAttr2Int, fck} from '@/filters'
    export default {
        name: 'StorageStatus',
        components: {
        },
        data() {
            return {
                showDialog: false,
                deposit: true,
                amount: 0
            }
        },
        computed: {
            ...mapGetters([
                'addr',
                'board',
                'account',
                'curPrice',
                'user'
            ]),
        },
        watch: {
        },
        created() {
        },
        methods: {
            transferAll(){
                log('account.vue.transferAll', {vm: this})
                this.amount = fck(this.account.accountBalance, -8, 2)
            },
            handleExchange(){
                const {_amount} = transferAttr2Int({
                    _amount: this.amount
                }, [], ['_amount'])
                if(_amount <= 0){
                    ToastUtils.showMsg('请输入正确数量')
                    return
                }
                log('account.vue.handleExchange', {_amount})
                if(this.deposit){
                    window.deposit(_amount)
                        .then(res=>{
                            ToastUtils.showMsg('存入操作已发送')
                            console.log('account.vue==>>deposit, res: %o', res)
                            this.showDialog = false
                            var id = setInterval(()=>{
                                getInfoByTransaction(res, (err, data) => {
                                console.log('account.vue==>>deposit.getInfoByTransaction err: %o, data: %o', err, data)
                                if(!err){
                                    if(data.block) {
                                        ToastUtils.showMsg('存入成功')
                                        clearInterval(id)
                                        this.$store.dispatch('user/updateAccount', this.addr)
                                    }
                                }else{
                                    ToastUtils.showMsg('存入失败')
                                }
                                })
                            }, 2000)
                        })
                }else{
                    window.withdraw(_amount)
                        .then(res=>{
                            ToastUtils.showMsg('提取操作已发送')
                            console.log('account.vue==>>withdraw, res: %o', res)
                            this.showDialog = false
                            var id = setInterval(()=>{
                                getInfoByTransaction(res, (err, data) => {
                                console.log('account.vue==>>withdraw.getInfoByTransaction err: %o, data: %o', err, data)
                                if(!err){
                                    if(data.block) {
                                        ToastUtils.showMsg('提取成功')
                                        clearInterval(id)
                                        this.$store.dispatch('user/updateAccount', this.addr)
                                    }
                                }else{
                                    ToastUtils.showMsg('提取失败')
                                }
                                })
                            }, 2000)
                        })
                }
            }
        }
    }
</script>
<style lang="scss" scoped>
    @import "./account.scss";
</style>
